<template>
  <div class="main-container container-limited container-fluid page-holder">
    <div class="page-title-holder">
      <h2 class="page-title">意见反馈</h2>
    </div>
    <el-menu mode="horizontal" class="deep-color a-link-item" :default-active="loadParams.type">
      <el-menu-item v-if="currentUser.admin" index="waiting">
        <router-link :to="`/feedback?type=waiting`">未受理</router-link>
      </el-menu-item>
      <el-menu-item v-else index="all">
        <router-link :to="`/feedback?type=all`">全部</router-link>
      </el-menu-item>
      <el-menu-item index="progressing">
        <router-link :to="`/feedback?type=progressing`">处理中</router-link>
      </el-menu-item>
      <el-menu-item index="resolved">
        <router-link :to="`/feedback?type=resolved`">已解决</router-link>
      </el-menu-item>
      <el-menu-item index="closed">
        <router-link :to="`/feedback?type=closed`">已关闭</router-link>
      </el-menu-item>
      <div v-if="!currentUser.admin" class="controls-container">
        <router-link
          class="el-button el-button--primary controls-child"
          :to="`/feedback/${$rp.CREATE}`"
          v-text="'新建反馈'"
        />
      </div>
    </el-menu>
    <list :list="list" :loading="loading" />
    <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import list from './list';
import { formatFeedbackList } from '../format';

export default {
  name: 'FeedbackIndex', // 反馈列表
  components: { list },
  data() {
    return {
      list: [],
      loading: false,
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  computed: {
    ...mapState(['currentUser']),
    loadParams() {
      return {
        type: this.$route.query.type || (this.currentUser.admin ? 'waiting' : 'all'),
        page: this.$route.query.page || 1,
      };
    },
  },
  created() { this.loadFeedbackList(); },
  methods: {
    // 加载反馈列表
    loadFeedbackList() {
      this.loading = true;
      this.$api.feedback.index(this.loadParams)
        .then((res) => {
          this.list = formatFeedbackList(res.data);
          this.pagination.currentPage = res.kaminari.current_page;
          this.pagination.pageCount = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
  watch: {
    loadParams() { this.loadFeedbackList(); },
  },
};
</script>

<style></style>
